<template>
  <div id="app">
    <edit
      :scale="scale"
      :width="width"
      :height="height"
      :offsetX="offsetX"
      :offsetY="offsetY"
      :showGrid="showGrid"
    ></edit>
  </div>
</template>

<script>
import edit from "./components/edit.vue";

export default {
  name: "app",
  components: {
    edit
  },
  computed: {
    scale() {
      return this.$store.state.canvas.scale;
    },
    width() {
      return this.$store.state.canvas.width;
    },
    height() {
      return this.$store.state.canvas.height;
    },
    offsetX() {
      return this.$store.state.canvas.offsetX;
    },
    offsetY() {
      return this.$store.state.canvas.offsetY;
    },
    showGrid() {
      return this.$store.state.canvas.showGrid;
    }
  }
};
</script>

<style>
#app {
  width: 100%;
  height: 100%;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
